<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title> </title>
        <meta name="viewport"  content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
            <!-- Link Swiper's CSS -->
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("swiper-8.0.7/swiper8/swiper-bundle.min.css")">
        <script src="@routes.Assets.versioned("lib/jquery/jquery.js")" type="text/javascript"></script>

        <script src="@routes.Assets.versioned("swiper-8.0.7/swiper8/swiper-bundle.min.js")" type="text/javascript"></script>



        <!-- Demo styles -->
        <style>
      html,
      body {
          position: relative;
          height: 100%;
      }

      body {
          background: white;
          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          font-size: 14px;
          color: #000;
          margin: 0;
          padding: 0;
      }

      .swiper {
          width: 100%;

          padding-bottom: 50px;
      }

      .swiper-slide {
          background-position: center;
          background-size: cover;
          max-width: 460px;
          max-height: 360px;
      }

      .swiper-slide img {
          display: block;
          max-height: 360px;
          width: 100%;
          height: 100%;
          border-radius: 10px;
      }
    </style>
    </head>

    <body>
            <!-- Swiper -->
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="@routes.Assets.versioned("images/1.jpg")" /></div>
                <div class="swiper-slide"><img src="@routes.Assets.versioned("images/2.jpg")" /></div>
                <div class="swiper-slide"><img src="@routes.Assets.versioned("images/3.jpg")" /></div>
                <div class="swiper-slide"><img src="@routes.Assets.versioned("images/4.jpg")" /></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

            <!-- Initialize Swiper -->
        <script>
      var swiper = new Swiper(".mySwiper", {
          effect: "coverflow",
          grabCursor: true,
          centeredSlides: true,
          slidesPerView: "auto",
          loop: true,
          speed: 2000,
          autoplay: {
              delay: 3500,
              disableOnInteraction: false,
          },
          coverflowEffect: {
              rotate: 50,
              stretch: 0,
              depth: 100,
              modifier: 1,
              slideShadows: true,
          },
          pagination: {
              el: ".swiper-pagination",
          },
      });
    </script>
    </body>
</html>
